.svg)
Gridlines and Axis Labels
GridLines rendering
To remove the vertical grid lines permanently, you would simply change the displayGridLines flag for the x-axis to false as follows:
var stxx = new CIQ.ChartEngine(/*...*/);
//your code here
stxx.chart.xAxis.displayGridLines = false;
//more code here
On the very next draw, the grid lines will be removed. Or you can call explicitly call draw() right after you modify the setting to activate your change; assuming a chart has already been rendered using loadChart().
A complete list of parameters for both the x- and y-axis can be found at CIQ.ChartEngine.YAxis and CIQ.ChartEngine.XAxis
If you wish to dynamically turn on or off the axis based on particular events or conditions within the animation loop (for example if a certain number of ticks is rendered due to the user zooming in or out), you would have to reset the stxx.chart.xAxis.displayGridLines programmatically using API injections to the "drawXAxis" function. This is a more advanced process and will require more in depth understanding of API injections.
In there you would have your code checking for the conditions that determine if the gridlines need to be rendered and set stxx.chart.xAxis.displayGridLines to true or false before and after drawXAxis is called. To manipulate the value before it is rendered, you would use a prepend call. To manipulate the value after it is rendered (possibly to reset it to your standard setting) you would use an append call.
These methods can also be used on the y-axis.
Example:
var stxx = new CIQ.ChartEngine(/*...*/);
//your code here
stxx.chart.yAxis.displayGridLines = false;
//more code here
Remember that contrary to the x-axis, which is shared by all renderings on the chart; every panel may have its own y-axis. So a better way to disable vertical grid lines on all study panels, is by setting CIQ.ChartEngine#displayGridLinesInStudies to false.
To also disable zones and center lines on studies add: CIQ.Studies.drawHorizontal=function(){};. For more details see CIQ.Studies.doPostDrawYAxis
Grid Labels spacing
idealTickSizePixels is used to define the ideal size between y-axis values in pixels. By default, it is set to 'null' to automatically calculate the spacing between the ticks/gridlines.
Example:
var stxx = new CIQ.ChartEngine(/*...*/);
//your code here
stxx.chart.panel.yAxis.idealTickSizePixels = 100; // there now will be 100 pixels in between each label and gridline on the yAxis.
//more code here
Same method can be used on the x-axis. See Custom X-Axis for details.
Customizing floating price label shapes
The price labels on the y-axis are drawn directly on the canvas as such the positioning and shape is not driven by the CSS.
There are several built-in shapes available to choose from. See yaxisLabelStyle for more details.
Additionally, you have the ability to create custom label shapes. All you have to do is create a function for it and initialize the yaxisLabelStyle to match the name of the function.
For example, the following code is a variation of the standard CIQ.roundRectArrow function called CIQ.roundRectArrowCustom. It is identical with the exception of the 'x=x+5;' line to shift it 5 pixels back.
Once you instantiate the chart object, set the yaxisLabelStyle :
var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer"), layout: { candleWidth: 16, crosshair: true } });
stxx.yaxisLabelStyle = "roundRectArrowCustom";
That is all there is to it.
The following is the full code which was copied directly from the CIQ.roundRectArrow.
CIQ.roundRectArrowCustom = function(params) {
params.x = params.x + 5; // <<< this was the only line added
CIQ.roundRect(params, "arrow");
};
Customizing labels font and size
This is a simple CSS change.
You can create an override for the font-size and load after the standard css.
Here are the exact entries found in stx-chart .css:
/* -------- Axis Styles -------- */
.stx_xaxis {
/* x-axis date styles */
font-size: 12px;
font-family: Helvetica;
color: #666;
}
.stx_yaxis {
/* y-axis price styles */
font-size: 10px;
font-family: Helvetica;
color: #333;
}
You may need to increase the width and height to fit larger fonts.
For the y-axis width, see CIQ.ChartEngine.YAxis#width
Example:
stxx.chart.yAxis.width = 100;
//must call the following 2 lines to activate if the axis is already drawn.
stxx.calculateYAxisPositions();
stxx.draw();
For the x-axis height, see CIQ.ChartEngine#xaxisHeight
Example:
stxx.xaxisHeight = 50;
Enabling X and Y Axis Titles
Titles can be enabled on both the x and y-axes. When enabled, the default value for the x-axis is 'Date/Time'. The titles of the y-axes will default to the name of the associated symbol / instrument or study.
Axis titles can be customized using the CIQ.ChartEngine#setXAxisTitle and CIQ.ChartEngine#setYAxisTitle functions. Both functions accept an object parameter with an enabled property that can be set to true or false to show or hide the corresponding axes. Additional customization is available using the title parameter, and for the y-axis, the yAxis parameter.
// this will enable the x-axis title and set a custom title
stxx.setXAxisTitle({ enabled: true, title: "My custom title" });
// this will enable the titles for all y-axes on the chart
stxx.setYAxisTitle({ enabled: true });
// this will enable a y-axis title with a custom title for the y-axis that is passed
stxx.setYAxisTitle({ enabled: true, yAxis: selectYAxis, title: "My custom title" });
The setYAxisTitle function allows you to customize a specific y-axis when you provide a yAxis parameter.
Example:
const macdStudy = Object.values(stxx.layout.studies).find((sd) => sd.name.includes("macd"))
if (macdStudy) {
const yAxis = macdStudy.getYAxis(stxx);
stxx.setYAxisTitle({ enabled: true, yAxis, title: "Custom Title" })
}
Note: Setting the title parameter overwrites the existing series or study title on that particular y-axis. For instance, when assigning a title to the Moving Average study, which shares a y-axis with the main chart, it overrides the main chart's title.
For more details on Chart Titles, see CIQ.ChartEngine.XAxis and CIQ.ChartEngine.YAxis.